<template>
    <div class="c">
        <span class="t1">{{ t("作品出售") }}</span>
        <span class="t2">{{ t("您的", {name: '宇航员手机壳'}) }}</span>
        <span class="t3">{{ t("被平台选中，是否愿意将作品放置平台出售") }}</span>
        <div class="btn-area">
            <el-button class="false btn" @click="$emit('action', false)">{{ t("否", undefined, '公共') }}</el-button>
            <el-button class="yes btn" @click="$emit('action', true)">{{ t("是", undefined, '公共') }}</el-button>
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
    },
    methods: {
        /**
         * 简化翻译方法(少写property)
         * @param {String} v 最后一个key值
         * @param {Object} opt 其他参数
         * @param {String} parent 
         */
        t(v, opt, parent) {
            let p = parent ? parent:'作品库';
            if (opt) {
                return this.$t(`${p}.${v}`, opt);
            }
            return this.$t(`${p}.${v}`);
        },
    },
}
</script>
<style lang="less" scoped>
.c {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .t1 {
        color: #000;
        font-size: 20px;
        font-weight: 500;
    }

    .t2 {
        margin-top: 40px;
        font-size: 18px;
        font-weight: 400;
        color: #000;
    }

    .t3 {
        font-size: 18px;
        font-weight: 400;
        color: #000;
    }

    .btn-area {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;

        .btn {
            border-radius: 10px;
            color: #F9F9F9;
            font-size: 16px;
            font-weight: 400;
            width: 170px;
        }

        .false {
            background: #FF5757;
            
        }

        .yes {
            background: #000;
        }
    }
}
</style>